<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人中心</title>
  <link rel="stylesheet" href="./CSS/userIndex.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">

  <style>
    .icon {
      width: 1em;
      height: 1em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
      font-size: 40px;
    }

    .chooseBox{
      width: 15px;
      height: 15px;
      background-color: white;
      box-sizing: border-box;
      border: 1px solid silver;
    }

    .active{
      background-color: red;
      border: 0;
    }
  </style>
</head>

<body>


  <div class="box" id="app" >

    <div class="mask" v-if="isShowChangeMsg">
      <div class="changeMsgBox">

        <div class="close" @click="closeChangeMsg">x</div>
        <div class="changeTitle">
          修改信息
        </div>
        <span class="errMsg" style="color: red;">{{errMsg}}</span>

        <div class="change changeName">
          <p class="chageStyle">新名字</p>
          <input type="text" class="nameInput" v-model="newUserName" @blur="checknewName()">
          <p class="checkStyle" ref="notice">{{noticeUsername}}</p>
        </div>
        <div class="change changePassword">
          <p class="chageStyle">新密码</p>
          <input type="password" class="nameInput" v-model="newPassword" @blur="checknewPassword()">
          <p class="checkStyle">{{noticePassword}}</p>
        </div>
        <div class="change changeQQemail">
          <p class="chageStyle">新邮箱</p>
          <input type="text" class="nameInput" v-model="newQQemail" @blur="checknewQQemail()">
          <p class="checkStyle">{{noticeQQemail}}</p>
        </div>
        <div class="change changePhone">
          <p class="chageStyle">新手机号</p>
          <input type="text" class="nameInput" v-model="newPhone" @blur="checknewPhone()">
          <p class="checkStyle">{{noticePhone}}</p>
        </div>
        <div class="buttonbox">
          <button class="submit" @click="submitNewMsg()">提交</button>
          <button class="waive">重置</button>
        </div>
      </div>
    </div>


    <!-- 左边侧边栏 -->
    <div class="left">

      <div class="myLogoBox">
        <div class="myLogo">
          <img src="./image/logo.png" style="width:100%;height: 100%;">
        </div>
        <div class="myTitle">Indenture</div>
      </div>

      <!-- 功能模块 -->
      <div class="functionBox">
        <div class="functionItem" v-for="(item,i) in functionList" :key="i" :class="{'active1':functionChoose==i}"
          @click="changeFunction(i)">
          <div class="functionLogo">
            <img :src="'./image/'+item.iconPath" class="full">
          </div>
          <div class="functionName">{{item.functionName}}</div>
        </div>
      </div>

    </div>
    <!-- 右边侧边 -->
    <div class="right">
      <div class="rightHead">
        <span>{{functionList[functionChoose].functionName}}</span>
        <div class="userBox">
          <div class="userNameBox">{{userMsg.username}}</div>
          <img :src="userMsg.uurl" style="width: 25px;height: 25px;">
        </div>
      </div>

      <div class="rightbox">

        <!-- 显示用户信息 -->
        <div class="userMsg" v-if="functionChoose==0">
          <div class="changeMsg" @click="showChangeMsg">修改信息</div>
          <div class="MsgLeft">
            <div class="changeImage" v-if=" showChangeImage">
              <div class="uploadImg">上传头像</div>
              <input type="file" accept=".png,.jdp" name="photo" class="inputImage" @change="getFile($event)" >

              <input type="submit" value="提交" class="imageTijiao tijiao" @click="shangchuanTouxiang">
              <div class="imageTijiao quxiao" @click="quxiaoImage">取消</div>
            </div>
            <div class="updateImage" style="  font-size: 12px;" @click="showChangeImageb">
              修改
            </div>
            <div class="userHeadImage">
              <img :src="userMsg.uurl" class="full">
            </div>
            <div class="userName">{{userMsg.username}}</div>
            <div class="userSex">
              <img src="./image/manLogo.png" class="full">
            </div>
          </div>
          <div class="MsgRight">
            <div class="rightTitle">详细信息</div>
            <div class="detail">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-quyu"></use>
              </svg>
              <span class="morder">{{userMsg.status==0?'学生':'老师'}}</span>
            </div>
            <div class="detail">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xinxi"></use>
              </svg> <span class="morder">{{userMsg.email}}</span>
            </div>

            <div class="detail">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-dianhua"></use>
              </svg>
              <span class="morder">{{userMsg.phone}}</span>
            </div>
          </div>
        </div>

        <!-- 组队信息 -->
        <div class="teamMsg" v-if="functionChoose==1">
          <div class="timeHead teamPaddinfLeft">Team information</div>

          <div class="msgKind teamPaddinfLeft">
            <p class="leader">队长</p>
            <p class="teamName">队伍名称</p>
            <p class="raceName">参加竞赛</p>
            <p class="peopleNum">操作</p>
          </div>

          <div class="teamItem teamPaddinfLeft" v-for="(item,i) in teamList" :key="i">
            <div class="leaderBox leader">
              <div class="leaderImage">
                <img :src="item.team.turl" class="full">
              </div>
              <div class="leaderName">{{item.leader.username}}</div>
            </div>
            <div class="teamName commenTeam">{{item.team.tname}}</div>
            <div class="raceName commenTeam">{{item.race.rname}}</div>
            <div class="peopleNum">
              <!-- 或者是退出 -->
              <div class="caozuo" v-if="item.team.lid == userMsg.uid" @click="jiesanTeam(item.team.tid)">解散</div>
              <div class="caozuo exit" v-else @click="quiteTeam(item.team.tid)">退出</div>
            </div>
          </div>
          <div class="teamPage teamPaddinfLeft">
            <div class="pageBox">
              <p>当前{{teamNowPage}}页，总共{{teamTotlePage}}页</p>
              <span class="iconfont icon-arrow-double-left" @click="backPage()"></span>
              <span class="iconfont icon-arrow-double-right" @click="agementPage()"></span>
            </div>
          </div>
        </div>


        <!-- 显示比赛表 -->
        <div class="raceBox" v-if="functionChoose==2">

          <div class="raceList">
            <div class="raceItem" v-for="(item,i) in  myraceList" :key="i">
              <div class="companImage">
                <img :src="item.rurl" style="width: 100%;height: 100%;">
              </div>
              <div class="companyMsgBox">
                <p class="companName">{{item.rname}}</p>
                <p class="raceJianjie"><span
                    style="font-size: 13px; color: rgb(105, 104, 104); font-weight: bold;">比赛简介：</span>
                  {{item.desc}}
                </p>
                <div class="raceLeader">
                  <p><span style="font-size: 13px; color: rgb(105, 104, 104); font-weight: bold;">主办方：</span> <span
                      style="color: rgb(145, 145, 145);">华为科技有限公司</span></p>
                  <div class="lookS">详情</div>
                </div>
              </div>
            </div>
          </div>

          <div class="raceArrow">
            <button class="raceLeft" @click="raceLast()">上一页</button>
            <button class="raceRight" @click="raceNext()">下一页</button>
            <div class="racePage">当前{{raceNowPage}}页,总共{{raceTotlePage}}页</div>
          </div>
        </div>

        <!-- 购物车 -->
        <div class="shopBox" v-if="functionChoose==3">
          <!-- 每一项 -->
          <div class="shopItem" v-for="(item,i) in goodsList" :key="i">
            <div class="goodsMsg">
              <div class="chooseBox" @click="isChecked(item.subject.sid,item.subject.price,i,item.subject.sname)" :class="{'active':chooseWho == i}"></div>
              <div class="goodsImage">
                <img :src="item.subject.surl" style="width: 100%;height: 100%;">
              </div>
              <div class="goodsText">
                <p style="font-size: 15px; "> {{item.subject.sname}}</p>
                <div class="teacherMsg">
                  <div class="teacherTouxiang">
                    <img :src="item.user.uurl" style="width: 100%;height: 100%;">
                  </div>
                  <p
                    style="margin-left: 10px; font-size: 12px; color: rgb(162, 162, 162);font-family: 宋体; font-weight: bold;">
                    {{item.user.username}}</p>
                </div>
              </div>
            </div>
            <div class="goodsDes">
              {{item.subject.desc}}
            </div>
            <div class="goodsCount">
              ￥{{item.subject.price}}
            </div>
            <div class="goodsSubmit">
              <button class="delectButton" @click="delectGoods(item.subject.sid)">删除</button>
            </div>
          </div>


          <div class=" jiesuan">
            <div class="controlPage">
              <button class="shopLast" @click="courseLast">上一页</button>
              <button class="shopNext" @click="courseNext">下一页</button>
              <div class="shopPage">当前1页,总共{{goodsPage}}页</div>
            </div>


            <div class="pay" style="position: relative;">
              <div class="payTilte">共计:{{titlePay}} ￥</div>

              <form action="alipay.trade.page.pay.jsp" style="    position: absolute;
    top: -61px;
    left: 99px;">
                <input v-model="subjectId" name="sid" style="opacity: 0; height: 0;">
                <input v-model="subjectname" name="subjectName" style="opacity: 0;height: 0;">
                <input v-model="userMsg.uid" name="uid" style="opacity: 0;height: 0;">
                <input v-model="titlePay" name="total_amount" style="opacity: 0;height: 0;">
                <button class="payBox" @click="submitDingdan" type="submit" >提交订单</button>
              </form>
            </div>
          </div>
        </div>

        <!-- 购物车 -->
        <div class="shopBox" v-if="functionChoose==4">
          <!-- 每一项 -->

          <div v-for="(item,i) in  dingdanList" class="shopItem">
            <div class="goodsMsg">

              <input type="checkbox" style="width: 15px;height: 15px;color: red;"
                @change=" isCheckedOrder(item.orderId,item.goodsPay)">
              <div class="goodsImage">
                <img :src="item.subject.surl" style="width: 100%;height: 100%;">
              </div>
              <div class="goodsText">
                <div class="teacherMsg">
                  <p
                    style="margin-left: 10px; font-size: 12px; color: rgb(162, 162, 162);font-family: 宋体; font-weight: bold;">
                    {{item.tradeNo}}</p>
                </div>
              </div>
            </div>
            <div class="goodsDes">
              <p>
                {{item.subject.desc }}
              </p>
            </div>

            <div class="goodsCount">
              ￥{{item.subject.price}}
            </div>

            <div class="goodsSubmit">

            </div>

          </div>
          <div class=" jiesuan">
            <div class="controlPage">
              <button class="shopLast">上一页</button>
              <button class="shopNext">下一页</button>
              <div class="shopPage">当前1页,总共10页</div>
            </div>


            <div class="pay">

            </div>
          </div>
        </div>
      </div>

    </div>

  </div>

  <script src="./iconfont/iconfont.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script src="./JS/vue.js"></script>

  <script>

    const vm = new Vue({
      el: "#app",

      // vue 实例对象
      created() {
        const userMsgk = JSON.parse(sessionStorage.getItem("user"))
        if(userMsgk!==null){
          this.userMsg = userMsgk
          this.newUserName = userMsgk.username
          this.newPassword = userMsgk.password
          this.newQQemail = userMsgk.email
          this.newPhone = userMsgk.phone
          this.getTeamList(userMsgk.uid,1)
          this.getRaceList(userMsgk.uid,1)
          this.getCourseList(1)
          this.getOrder(1,userMsgk.uid)
        }


        else {
          location.href="./login.html"
        }
      },
      data: {
        // 关于用户信息的
        showChangeImage:false,
        errMsg:'',
        userMsg : {},
        functionChoose: 0,
        functionList: [
          { functionName: '个人信息', iconPath: 'user.png' },
          { functionName: '组队信息', iconPath: 'users.png' },
          { functionName: '我的竞赛', iconPath: 'bell.png' },
          { functionName: '购物车', iconPath: 'shopping-cart.png' },
          { functionName: '查看订单', iconPath: 'star.png' }
        ],

        // 关于组队信息
        teamNowPage: 1,
        teamTotlePage: 0,
        myID: "201102",
        teamList: [

        ],

        // 关于竞赛
        myraceList: [],
        raceNowPage: 1,
        raceTotlePage: 10,


        // 关于购物车的
        goodsList: [],
        titlePay: 0,
        goodsPage:0,
        goodsNowPage:1,
        chooseWho:-1,
        subjectname:"",
        subjectId:-1,

        // 关于订单的
        dingdanList: [],
        OrderCount: 0,


        // 关于表单验证
        newUserName: '',
        newPassword: '',
        newQQemail: '',
        newPhone: '',

        noticeUsername: '只能中文、字母、英文',
        noticePassword: '6~11位长度 数字、字母、下划线',
        noticeQQemail: '只能以@qq.com',
        noticePhone: '11位数字 只能1开头 第二位 3~9',
        isShowChangeMsg: false,
        // 图片上传

        imageUpload:null

      },
      methods: {
        getOrder(pageIndex,uid){
          axios({
            method: 'post',
            url: '/Indenture/order/listByStudent',
            data: {
              uid,
              pageIndex
            }
          }).then((res) => {
            console.log(res.data)
            this.dingdanList =  res.data.orderList
          })
        },
        submitDingdan(){
          if(this.subjectId!=-1&&this.subjectname!=""){
            axios({
              method: 'post',
              url: '/Indenture/order/pay',
              headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
              },
              data: {
                total_amount: this.titlePay,
                subjectName:this.subjectname,
                uid:this.userMsg.uid,
                sid:this.subjectId
              }
            }).then((res) => {
            })
          }


        },
        delectGoods(sid){
          axios({
            method: 'post',
            url: '/Indenture/shoppingcartDelete',
            data: {
              uid: this.userMsg.uid,
              sid:sid
            }
          }).then((res) => {
            if(parseInt(res.data.status)==1){
                this.getCourseList(1)
            }
            else {
              alert("删除失败")
            }
          })
        },
        courseLast(){

            if(this.goodsNowPage==1){
              alert("已经是第一页")
              return;
            }
          this.chooseWho = -1
            this.titlePay = 0
            this.goodsNowPage--
            this.getCourseList(this.goodsNowPage)
        },
        courseNext(){

          if(this.goodsNowPage==this.goodsPage){
            alert("已经是最后一页")
            return;
          }

          this.chooseWho = -1
          this.titlePay = 0
          this.goodsNowPage++
          this.getCourseList(this.goodsNowPage)
        },

        getCourseList(pageIndex){
          axios({
            method: 'post',
            url: '/Indenture/shoppingcart',
            data: {
              uid: this.userMsg.uid,
              pageIndex:pageIndex
            }
          }).then((res) => {
            this.goodsList = res.data.subjectMsg
            this.goodsPage = res.data.pageCount
          })
        },

        getRaceList(uid,pageIndex) {
          axios({
            method: 'post',
            url: '/Indenture/raceListByUser',
            data: {
              uid: uid,
              pageIndex:pageIndex
            }
          }).then((res) => {
            console.log(res.data)
            this.myraceList = res.data.racesMsg
            this.raceTotlePage = res.data.countMsg
          })
        },

        quiteTeam(tid){
          axios({
            method: 'post',
            url: '/Indenture/teamQuit',
            data: {
              uid: this.userMsg.uid,
              tid:tid
            }
          }).then((res) => {
            if(res.data.status==1){
              alert("已退出")

              this.getTeamList(this.userMsg.uid,1)
            }
            else {
              alert("退出失败")
            }
          })
        },
        getTeamList(uid, pageIndex) {
          axios({
            method: 'post',
            url: '/Indenture/teamListByUser',
            data: {
              uid: uid,
              pageIndex: pageIndex
            }
          }).then((res) => {

            this.teamList = res.data.teamMsg
            this.teamTotlePage = res.data.count
          })
        },

        jiesanTeam(tid) {
          axios({
            method: 'post',
            url: '/Indenture/teamDelete',
            data: {
              tid: tid
            }
          }).then((res) => {
            if (parseInt(res.data.statue) == 1) {
              alert("解散成功！")

              this.getTeamList(this.userMsg.uid, 1)
            } else {
              alert("解散失败")
            }
          })
        },
        quxiaoImage() {
          this.showChangeImage = false
        },
        showChangeImageb() {
          this.showChangeImage = true
        },
        shangchuanTouxiang() {
          if (this.imageUpload == null) {
            alert("上传图片")
          } else {
            const formdata = new FormData()
            formdata.append('files', this.imageUpload)
            axios({
              method: 'post',
              url: '/Indenture/user/updateUrl',
              headers: {
                'Content-Type': 'multipart/form-data'
              },
              data: formdata
            }).then((res) => {
              sessionStorage.removeItem('user')
              this.userMsg.uurl = res.data.url
              sessionStorage.setItem('user', JSON.stringify(this.userMsg))
              this.showChangeImage = false
            })
          }
        },
        getFile(event) {
          this.imageUpload = event.target.files[0]
        },
        // 提交数据
        submitNewMsg() {
          const zhenzheUsername = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
          const zhengzhePassword = /^\w{6,11}$/;
          const zhengzheQqemail = /\d+@qq.com/;
          const zhengzhePhoneNumber = /[1][3-9]\d{9}$/

          if (zhenzheUsername.test(this.newUserName) && zhengzhePassword.test(this.newPassword) && zhengzheQqemail.test(this.newQQemail) && zhengzhePhoneNumber.test(this.newPhone)) {


            axios({
              method: 'post',
              url: '/Indenture/user/update',
              data: {
                uid: this.userMsg.uid,
                username: this.newUserName,
                password: this.newPassword,
                email: this.newQQemail,
                phone: this.newPhone,

                uurl: this.userMsg.uurl
              }
            }).then((res) => {

              if (res.data.status == 0) {
                // 错误

                this.errMsg = res.data.Msg
              } else {
                sessionStorage.removeItem("user")
                location.href = "./login.html"
              }
            })

          } else {
            alert("输入格式不对")
          }

        },
        showChangeMsg() {
          this.isShowChangeMsg = true
        },
        closeChangeMsg() {
          this.isShowChangeMsg = false
        },
        checknewName() {
          var zhenzheUsername = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
          if (zhenzheUsername.test(this.newUserName)) {
            this.noticeUsername = "满足要求"
          } else {
            this.noticeUsername = "不满足要求"
          }
        },
        checknewPassword() {
          var zhengzhePassword = /^\w{6,11}$/;
          if (zhengzhePassword.test(this.newPassword)) {
            this.noticePassword = "满足要求"
          } else {
            this.noticePassword = "不满足要求"
          }
        },
        checknewQQemail() {
          var zhengzheQqemail = /\d+@qq.com/;
          if (zhengzheQqemail.test(this.newQQemail)) {
            this.noticeQQemail = "满足要求"
          } else {
            this.noticeQQemail = "不满足要求"
          }
        },
        checknewPhone() {
          var zhengzhePhoneNumber = /[1][3-9]\d{9}$/
          if (zhengzhePhoneNumber.test(this.newPhone)) {
            this.noticePhone = "满足要求"
          } else {
            this.noticePhone = "不满足要求"
          }
        },
        changeFunction(i) {
          this.functionChoose = i
          this.titlePay = 0
          this.OrderCount = 0
        },

        // 组队

        // 组队前进   
        agementPage() {
          if (this.teamNowPage >= this.teamTotlePage) {
            alert("已经是最后一页")
            return;
          }
          this.teamNowPage++
        },
        backPage() {
          if (this.teamNowPage <= 1) {
            return;
          }
          this.teamNowPage--
        },

        // 比赛下一张
        raceNext() {
          if (this.raceNowPage >= this.raceTotlePage) {
            alert("已经是最后一页")
            return;
          }

          this.raceNowPage++
        },
        raceLast() {
          if (this.raceNowPage <= 1) {
            return;
          }
          this.raceNowPage--
        },


        isChecked(id, pay,i,sname) {
          var payNumber = parseInt(pay)
          this.titlePay =  payNumber
          this.chooseWho = i
          console.log("sid:"+id)
          console.log("pay:"+pay)
          console.log("sname:"+sname)
          this.subjectname = sname
          this.subjectId = id
        },
        isCheckedOrder(id, pay) {
          var payNumber = parseInt(pay)
          if (event.target.checked) {


            this.OrderCount = this.OrderCount + payNumber
          } else {

            this.OrderCount = this.OrderCount - payNumber
          }

        }
      }
    })


  </script>

</body>

</html>